<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset='utf-8'/>
	<title>lesson5_三级联动案例</title>
	<style>
		select{  width: 200px; height: 35px;  }
	</style>
</head>
<body>
<span>省：</span>
<select class="sheng">
	<option>请选择</option>
</select>
<span>市：</span>
<select class="shi"></select>
<span>区：</span>
<select class="qu"></select>
<script>
	var shengSelect = document.querySelector('.sheng');
	var shiSelect = document.querySelector('.shi');
	var quSelect = document.querySelector('.qu');
	var shengList = ['河北省','黑龙江省','日本省'];
	var shiList = [['保定市','石家庄市'],['大庆市','哈尔滨市','齐齐哈尔市'],['广岛市','长崎市']];
	var shengIndex = 0;//选中的省的下标


	//(1)页面加载的时候，先将省下拉框中填入内容
	for(var i=0; i<shengList.length; i++){
		var shengOption = new Option(shengList[i]);
		shengSelect.options.add(shengOption);
	}
	//(2)对下拉列表添加change事件，表示当其所代表的value值发生变更时调用
	shengSelect.onchange = function (eve){
		shengIndex = eve.target.selectedIndex-1;
		if(shengIndex == -1){
			//请选择选项，清空所有
			shiSelect.options.length = 0;
		}else{
			//(4)添加当前所选的省对应的市内容之前，先清空市select内容
			shiSelect.options.length = 0;
			//(3)当选中了某个省之后，加载这个省对应的所有的市
			for(var j=0; j<shiList[shengIndex].length; j++){
				var shiOption = new Option(shiList[shengIndex][j]);	
				shiSelect.options.add(shiOption);			
			}
		}
	};


</script>
</body>
</html>